import react, { Component } from 'react';
import { connect } from 'react-redux';
import { updateData } from '../reducer/index';

class PageNum extends Component {
    constructor(props) {
        super(props);
        this.state = {
            startPage: 1,
        }
    }

    componentDidMount() {
        let { currentPage } = this.props;
        let jumpInput = document.getElementById('jump-input');
        jumpInput && (jumpInput.value = currentPage);
    }
    componentDidUpdate() {
        let { currentPage } = this.props;
        let jumpInput = document.getElementById('jump-input');
        jumpInput && (jumpInput.value = currentPage);
    }
    render() {
        let { startPage } = this.state;
        let { totalPage,deviceNum,currentPage } = this.props;
        let prevCls = currentPage === 1 ? "item disabled" : "item";
        let nextCls = currentPage === totalPage ? "item disabled" : "item";

        let pages = this._handlePages(totalPage, currentPage, startPage);

        return (
            < div className="pages" >
                <div className = "pack-pages" >
                    <div className="total">共{deviceNum}条</div>
                    <div className={prevCls} onClick={this._move("prev")}>
                        <span>&lt;</span>
                    </div>
                    <ul className="page-num">{pages}</ul>
                    <div className={nextCls} onClick={this._move("next")} >
                        <span>&gt;</span>
                    </div>
                    <div className="form">
                        <span className="text">前往</span>
                        <input className="jump-input"
                            id='jump-input'
                            type="text"
                            onChange={this._oninput}
                            onBlur={this._jumap}
                        />
                        <span className="text">页</span>
                    </div>
                </div>
            </div>
        );
    }

    _move = (key) => {
        return () => {
            let { currentPage } = this.props;
            if (key === 'prev') {
                currentPage = currentPage - 1;
            } else {
                currentPage = currentPage + 1;
            }
            this._pageClick(currentPage);
        }
    }

    _pageClick = async (currentPage) => {

        let { accessToken, deviceList } = this.props;
        if (!deviceList[currentPage-1]) {
            let { deviceIDList } = window.$getState();
            const deviceIds = deviceIDList.slice(8 * (currentPage - 1), 8 * currentPage).join(',');
            let bindDeviceListRes = await window.bindDeviceList({
              deviceIds,
              token: accessToken,
            });
            deviceList[currentPage-1] = bindDeviceListRes.result.data;
        }

        let jumpInput = document.getElementById('jump-input');
        jumpInput && (jumpInput.value = currentPage);

        let startPage = currentPage >= 6 ? currentPage - 2 : 1;
        this.setState({
            startPage,
        });
        updateData({
            currentPage,
            deviceList
        });
    }

    _oninput = () => {
        let jumpInput = document.getElementById('jump-input');
        let { totalPage } = this.props;

        let value = Number(jumpInput.value);
        if (window.isNaN(value) || value < 1 || value > totalPage) {
            jumpInput.value = '';
        }
    }

    _jumap = () => {
        let { currentPage } = this.props;
        let jumpInput = document.getElementById('jump-input');
        
        if (jumpInput.value === '') { 
            jumpInput.value = currentPage;
            return;
        }
        this._pageClick(Number(jumpInput.value));
    }

    _handlePages = (totalPage, currentPage, startPage) => {
        let pages = [];
        if (totalPage <= 7) {
            for (let i = 1; i <= totalPage; i++) {
                pages.push(<li key={i} onClick={() => {this._pageClick(i)}}
                    className={currentPage === i ? "item num item-active" : "item num"}>{i}</li>)
            }
        } else {
            pages.push(<li className={currentPage === 1 ? "item num item-active" : "item num"} key={1}
                onClick={() => {this._pageClick(1)}}>1</li>)

            if (currentPage >= 5) {
                pages.push(<li className="item num" key={-1}>···</li>)
            }
            //非第一页和最后一页显示
            let startNUm = totalPage - currentPage > 3 ? currentPage - 2 : totalPage - 5;
            let endNUm = currentPage <= 3 ? 7 : (totalPage - currentPage > 3 ? currentPage + 3 : totalPage);
            for (let i = startNUm; i < endNUm; i++) {
                if (i <= totalPage - 1 && i > 1) {
                    pages.push(<li className={currentPage === i ? "item num item-active" : "item num"} key={i}
                        onClick={() => {this._pageClick(i)}}>{i}</li>)
                }
            }
            //后面省略号
            if (totalPage - startPage >= 6) {
                pages.push(<li className="item num" key={-2}>···</li>)
            }
            //最后一页
            pages.push(<li className={currentPage === totalPage ? "item num item-active" : "item num"} key={totalPage}
                onClick={() => {this._pageClick(totalPage)}}>{totalPage}</li>)
        }
        return pages;
    }
}

const mapStateToProps = (state) => {
    let totalPage = Math.ceil(state.deviceIDList.length / 8);
    return {
        currentPage: state.currentPage,
        accessToken: state.accessToken,
        deviceList: state.deviceList,
        deviceNum: state.deviceIDList.length,
        totalPage
    };
};
export default connect(mapStateToProps)(PageNum);